<template>
    <div class="form-block-inner">
        <Form ref="formItem" :rules="ruleValidate" :model="formItem" label-position="top">
            <div class="title-style">基本信息</div>
            <Row :gutter="16">
                <Col span="12">
                    <FormItem prop="title" label="行权事项名称：">
                        <Input v-model="formItem.title" maxlength="255" clearable placeholder="请填写行权事项名称"/>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="sys_title" label="行权事项制度名称：">
                        <Input v-model="formItem.sys_title" maxlength="255" clearable placeholder="请填写行权事项制度名称"/>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="type" label="行权类型：">
                        <Select clearable v-model="formItem.type" style="width:100%">
                            <Option v-for="(item,index) in typeList" :value="item.value" :key="index">{{item.label}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="is_exist_sys" label="现有行权系统：">
                        <RadioGroup v-model="formItem.is_exist_sys">
                            <Radio label="0">有</Radio>
                            <Radio label="1">无</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
            </Row>
            <div class="title-style">行权事项风险问题</div>
            <Row>
                <Col span="24">
                    <div v-for="(item,index) in riskList" :key="index">
                        <Row :gutter="16">
                            <Col span="16">
                                <FormItem class="required" :label="'行权事项风险问题' + (index + 1) + '：'">
                                    <Input v-model="riskList[index]" type="textarea" :autosize="{minRows: 5,maxRows: 5}"
                                           maxlength="255" show-word-limit placeholder="请填写行权事项风险问题"></Input>
                                </FormItem>
                            </Col>
                            <Col span="3" offset="4">
                                <FormItem label=" " class="col-last-btn">
                                    <Button @click="delAction(index, 'risk')" type="error" shape="circle" icon="md-close"></Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <Row>
                        <Col span="24">
                            <Button type="success" @click="add('risk')">添加</Button>
                        </Col>
                    </Row>
                    <br>
                </Col>
            </Row>
            <!--<Row>
                <Col span="24">
                    <FormItem prop="risk_issues" label="行权事项风险问题：">
                        <Input v-model="formItem.risk_issues" type="textarea" :autosize="{minRows: 5,maxRows: 5}"
                               maxlength="255" show-word-limit placeholder="请填写行权事项风险问题"></Input>
                    </FormItem>
                </Col>
            </Row>-->
            <div class="title-style">行权事项流程（节点）</div>
            <Row>
                <Col span="24">
                    <div v-for="(item,index) in nodeList" :key="index">
                        <Row :gutter="16">
                            <Col span="16">
                                <FormItem class="required" :label="'行权事项流程（节点）' + (index + 1) + '：'">
                                    <Input v-model="nodeList[index]" placeholder="请填写行权事项流程（节点）"></Input>
                                </FormItem>
                            </Col>
                            <Col span="3" offset="4">
                                <FormItem label=" " class="col-last-btn">
                                    <Button @click="delAction(index, 'node')" type="error" shape="circle" icon="md-close"></Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <Row>
                        <Col span="24">
                            <Button type="success" @click="add('node')">添加</Button>
                        </Col>
                    </Row>
                    <br>
                </Col>
            </Row>
            <Divider/>
            <div class="button-group">
                <Button type="primary" @click="saveBtnAction" :loading="btnLoading">保存数据</Button>
            </div>
        </Form>
    </div>
</template>

<script>
import {
  saveOffStaff,
  getOffStaffById
} from '@/api/setting/off-staff'
export default {
  data () {
    return {
      ruleValidate: {
        title: [
          { required: true, message: '行权事项名称不能为空', trigger: 'blur' }
        ],
        sys_title: [
          { required: true, message: '行权事项制度名称不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '行权类型不能为空', trigger: 'change' }
        ],
        // risk_issues: [
        //   { required: true, message: '行权事项风险问题不能为空', trigger: 'blur' }
        // ],
        is_exist_sys: [
          { required: true, message: '现有行权系统不能为空', trigger: 'change' }
        ]
      },
      formItem: {
        node: [{}]
      },
      typeList: [
        {
          label: '行政征收',
          value: '1'
        },
        {
          label: '行政裁决',
          value: '2'
        },
        {
          label: '行政给付',
          value: '3'
        },
        {
          label: '行政奖励',
          value: '4'
        },
        {
          label: '行政确认',
          value: '5'
        },
        {
          label: '行政许可',
          value: '6'
        },
        {
          label: '行政强制',
          value: '7'
        },
        {
          label: '行政检查',
          value: '8'
        },
        {
          label: '行政处罚',
          value: '9'
        },
        {
          label: '其他权力',
          value: '10'
        }
      ],
      nodeList: [''],
      riskList: [''],
      btnLoading: false
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    saveBtnAction () {
      // 校验风险问题
      if (this.riskList.length === 0 || !this.riskList[0]) {
        this.$Message.warning('请至少填写一个行权事项风险问题')
        return false
      }
      let riskFlag = false
      this.riskList.forEach(item => {
        if (!item) riskFlag = true
      })
      if (riskFlag) {
        this.$Message.warning('请检查行权事项风险问题')
        return false
      }
      // 校验节点
      if (this.nodeList.length === 0 || !this.nodeList[0]) {
        this.$Message.warning('请至少填写一个节点')
        return false
      }
      let nodeFlag = false
      this.nodeList.forEach(item => {
        if (!item) nodeFlag = true
      })
      if (nodeFlag) {
        this.$Message.warning('请检查节点')
        return false
      }
      // 数据处理
      this.formItem.risk_issues = this.riskList.toString()
      this.formItem.node = this.nodeList.toString()
      // 数据校验
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.saveDataAction(this.formItem)
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    saveDataAction (param) {
      this.btnLoading = true
      saveOffStaff(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$router.push({
            name: 'OffStaffList'
          })
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    add (type) {
      switch (type) {
        case 'risk':
          this.riskList.push('')
          break
        case 'node':
          this.nodeList.push('')
          break
      }
    },
    delAction (index, type) {
      switch (type) {
        case 'risk':
          this.riskList.splice(index, 1)
          break
        case 'node':
          this.nodeList.splice(index, 1)
          break
      }
    },
    init (param) {
      getOffStaffById(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = data.data
          this.nodeList = this.formItem.node.split(',')
          this.riskList = this.formItem.risk_issues.split(',')
        } else {
          this.error(data)
        }
      })
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.init({ id: this.$route.query.id })
    }
  }
}
</script>

<style scoped>
    .input-btn {
        display: flex;
    }

    .col-last-btn {
        float: right;
        margin-right: 40px;
    }

    .button-group {
        text-align: center;
    }

    .input-btn /deep/ .ivu-input {
        width: 34%;
    }

    .required /deep/.ivu-form-item-label:before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
    }
</style>
